<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../css1/bootstrap.min.css"/>
<script src="../js1/jquery.min.js"></script>
<script src="../js1/bootstrap.min.js"></script>
<style>
	.panel-group.table-responsive a{
		width: 180px;
	}
	button{
	    display: inline-block;
	}
</style>

<script>
		$(function(){
			$('#ul1 li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			})
		})
	</script>
</head>
<body style=" margin: 20px; margin-bottom: 60px;" >
		<div>
			<center>
			<ul id="ul1" class="nav nav-pills nav-justified  container" style="background-color: powderblue;">
				<li class="active"><a href="post.jsp">岗位信息</a></li>
				<li><a href="addpost.jsp">岗位添加</a></li>
			</ul>				
			<br><hr >
			<div class="container-fluid">    
				<div class="row main">
					<!-- 查询岗位信息列表 -->
					<div>
						<label>查询岗位信息列表</label><br />
						<input type="text" placeholder="请输入想要查询的岗位编号" />
						<input type="text" placeholder="请输入想要查询的岗位名称" />
						<button id="selectGangWeiInfo" class="btn btn-info">查询</button>
						<br /><br />
						<!-- 默认岗位列表 -->
						<table class="table table-hover">
							<tr>
								<td>岗位编号</td><td>岗位名称</td><td>岗位员工姓名</td>
							</tr>
							<tr>
								<td>001</td><td>开发</td><td>张龙</td>
							</tr>
							<tr>
								<td>002</td><td>文案</td><td>赵虎</td>
							</tr>
							<tr>
								<td>003</td><td>清洁</td><td>王朝</td>
							</tr>
							<tr>
								<td>004</td><td>保安</td><td>马汉</td>
							</tr>
						</table>
					</div>
					<br />
					<!-- 选项列表 -->
					<div id="xuanXiangList">
						<label>查询岗位下属员工</label><br />
						<input type="text" placeholder="请输入想要查询的员工编号" />
						<input type="text" placeholder="请输入想要查询的员工姓名" />
						<button id="selectEmployee" class="btn btn-info">查询</button>
						<br /><br />
						<button id="createGangWei" class="btn btn-info">新建岗位</button>
						<button id="modifyGangWei" class="btn btn-info">修改岗位信息</button>
						<button id="delGangWei" class="btn btn-info">删除岗位</button>
						<br /><br />
					</div>
					
					<!-- 岗位下属员工信息表 -->
					<div id="employeeTable">
						<table class="table table-hover">
							<tr>
								<td>员工编号</td><td>员工姓名</td><td>入职日期</td><td>职业生涯</td>
							</tr>
							<tr>
								<td>001</td><td>张三</td><td>19860121</td><td>建筑师</td>
							</tr>
							<tr>
								<td>002</td><td>李四</td><td>19920324</td><td>教师</td>
							</tr>
							<tr>
								<td>003</td><td>王五</td><td>19731130</td><td>军人</td>
							</tr>
							<tr>
								<td>004</td><td>赵六</td><td>19860121</td><td>司机</td>
							</tr>
						</table>
					</div>
					<br />
				</div>
			</div>
			</center>
		</div>
</body>
</html>